﻿@using XRepair.Models

@model List<Model>

@{
    ViewBag.Title = "Index";

    List<Brand> activeBrands = MvcXRepairAdmin.CacheData.Cache.GetAllActiveBrands();
    Dictionary<int, string> brandDict = activeBrands.ToDictionary(x => x.ID.Value, x => x.BrandName);
}

@section head
{
    <link type="text/css" href="@Url.Content(@"~\Content\themes\base\jquery-ui.css")" rel="stylesheet" />

    <style type="text/css">
        #modelList
        {
            border-collapse: collapse;
        }

        #modelList td
        {
            border: 1px solid #999;
            vertical-align: top;
        }

        #dlgAddNewModel td, #dlgEditModel td
        {
            vertical-align: top;
        }

        .lnkEditModel
        {
            cursor: pointer;
        }

        #modelList thead tr
        {
            font-weight: bold;
            background: #999;
        }
    </style>
}

<h2>List of models</h2>

<table id="modelList">
    <thead>
        <tr>
            <td class="hide">[ID]</td>
            <td>[Brand]</td>
            <td>[ModelName]</td>
            <td>[Version]</td>
            <td>[Manufacturer]</td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td class="hide">@item.ID</td>
                <td class="hide">@item.BrandID</td>
                <td>@brandDict[item.BrandID]</td>
                <td>@item.ModelName</td>
                <td>@item.Version</td>
                <td>@item.Manufacturer</td>
                <td><a class="lnkEditModel">Edit</a>
                    <br />@Html.ActionLink("Delete", "Delete", new { id = @item.ID })</td>
            </tr>
        }
    </tbody>
</table>

<input type="button" value="Add new" id="btnAddNewModel" />

<div id="dlgAddNewModel" class="hide" title="Add new model">
    @Html.Partial("AddNewPartial", new Model())
</div>

<div id="dlgEditModel" class="hide" title="Edit model">
    @Html.Partial("EditPartial", new Model())
</div>

@section lazy
{
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\jquery-ui-1.8.20.min.js")"></script>
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\mvcxrepairadmin.js")"></script>

    <script type="text/javascript">
        $(function () {
            $("#dlgAddNewModel, #dlgEditModel").dialog({
                autoOpen: false,
                height: 300,
                width: 530,
                modal: false,
                resizable: false
            });

            $("#btnAddNewModel").click(function () {
                $("#dlgAddNewModel").dialog("open");
            });

            $("#btnCancelAdd").click(function () {
                $("#dlgAddNewModel").dialog("close");
            });

            $("#btnCancelEdit").click(function () {
                $("#dlgEditModel").dialog("close");
            });

            $(".lnkEditModel").click(function () {
                var contextObj = $(this);
                BindCurrentRowToModel(contextObj);
                $("#dlgEditModel").dialog("open");
            });

        });

        function BindCurrentRowToModel(contextObj) {

            var currentRowDataArr = [];
            var currentRow = $(contextObj).closest("tr");

            $('td', currentRow).each(function (i, td) {
                currentRowDataArr.push($(td).html());
            });

            $("#dlgEditModel #ID").val(currentRowDataArr[0]);
            $("#dlgEditModel #BrandID option[value='" + currentRowDataArr[1] + "']").attr("selected", "selected");
            $("#dlgEditModel #ModelName").val(currentRowDataArr[3]);
            $("#dlgEditModel #Version").val(currentRowDataArr[4]);
            $("#dlgEditModel #Manufacturer").val(currentRowDataArr[5]);
        }

    </script>
}

